<template>
  <div class="divBox">
      <el-upload class="upload-demo" style="width:300px" ref="upload" :show-file-list="false" action :auto-upload="false" :on-change="uploadFile" :on-remove="deleteFile">
        <el-button size="medium" type="primary" icon="el-icon-upload" :loading="progress!=0&&progress!=100" >点击上传</el-button>
        <a-progress type="circle" style="margin: 5px 2px" :text-inside="true" :width="28" :percent="progress" :hidden="progress==0"/>
      </el-upload>
    <idv>
      <uploadImg text="图片"  ref="childData" :max-length="3"/>
    </idv>

<!--
  this.$refs["childData"].fileList.map(item => {return item.url}).join(','))
  获取值
-->

  </div>
</template>
<script>
  import {client} from '@/api/oss'
  import uploadImg from '@/components/Upload/uploadImg'

  export default {
    components: {
      uploadImg,
    },
    data() {
      return {
        progress: 0,
        uploadId:''
      }
    },
    methods: {
      deleteFile(files){
        this.progress=0
       // console.error(files)
      },
      async uploadFile(files) {
        let that = this;
        let file = files.raw;
        const options = {
          // 获取分片上传进度、断点和返回值。
          progress: (p, cpt) => {
            that.uploadId = cpt.uploadId;//取消时需要的参数
            that.progress = Number((p * 100).toFixed(0));//进度条
          },
          // 设置并发上传的分片数量。
          parallel: 100,
          // 设置分片大小。默认值为1 MB，最小值为100 KB。
          partSize: 100 * 1024,
        };
        //开始分片上传。
        async function multipartUpload() {
          try {
            //object-name可以自定义为文件名（例如file.txt）或目录（例如abc/test/file.txt）的形式，实现将文件上传至当前Bucket或Bucket下的指定目录。
            let result = await client.multipartUpload("upload/"+file.name, file, {...options,});
            that.$message.success("https://files.gamepro.vip/upload/"+file.name);
          } catch (e) {console.log(e);}
        }
        multipartUpload(); //调用函数
      }
    }
  }
</script>
